// 题目的正确选项
let optionsID = null
// 开关状态
let onOff = null

// 设置页面信息
function setDocInfo() {
    async function getData() {
        try {
            let result = await axios({
                url: '../php/cont_api.php'
            })
            return result.data

        } catch (error) {
            console.error(error)
        }
    }

    getData().then(data => {
        // 开关状态
        onOff = data.onOff
        const onOffButton = document.querySelector('.header button')
        if (data.onOff == '1') {
            onOffButton.innerText = '开启中(点击关闭)'
            onOffButton.style.backgroundColor = '#31cb2b'
            onOffButton.style.color = '#fff'
        }
        else if (data.onOff == '0') {
            onOffButton.innerText = '已关闭(点击开启)'
            onOffButton.style.backgroundColor = '#ccc'
        }
        onOffButton.addEventListener('click', function (e) {
            if (onOff == null) {
                alert('获取状态中')
            }
            else if (onOff == '0') {
                onOffButton.innerText = '开启中(点击关闭)'
                onOffButton.style.backgroundColor = '#31cb2b'
                onOffButton.style.color = '#fff'
                onOff = '1'
                console.log(onOff)
            }
            else if (onOff == '1') {
                onOffButton.innerText = '已关闭(点击开启)'
                onOffButton.style.backgroundColor = '#ccc'
                onOff = '0'
                console.log(onOff)
            }
        })
        // 顶部标题
        document.querySelector('.videoContTitleSetBox .videoContText').value = data.title
        // 视频的Url
        document.querySelector('.videoFileUrl').value = data.videoUrl
        // 视频简介信息
        document.querySelector('.videoIntroInfoText').value = data.videoTitles
        // 题目内容
        document.querySelector('.topicContText').value = data.topicContent

        // 题目选项
        optionsID = data.correctAnswerOption
        let options = document.querySelector('.optionsList')
        const optionSpan = document.querySelectorAll('span')
        optionSpan.forEach((item, index) => {
            item.style.color = '#7AD7FF'
            item.style.backgroundColor = '#fff'
        })
        optionSpan[data.correctAnswerOption].style.color = '#fff'
        optionSpan[data.correctAnswerOption].style.backgroundColor = 'red'
        options.addEventListener('click', function (e) {
            if (e.target.nodeName === 'SPAN') {
                optionSpan.forEach((item, index) => {
                    item.style.color = '#7AD7FF'
                    item.style.backgroundColor = '#fff'
                })
                e.target.style.color = '#fff'
                e.target.style.backgroundColor = 'red'
                optionsID = e.target.getAttribute("data-option")
                // console.log(optionsID)
            }
        })


        // 题目内容
        const optionInput = document.querySelectorAll('.optionsList .option input')
        for (let i = 0; i < optionInput.length; i++) {
            optionInput[i].value = data.questionAnswer[i]
        }

        // 老师简介
        document.querySelector('.techerName').value = data.teacherSName
        // 成功头衔
        document.querySelectorAll('.tagInputBox input').forEach((item, index) => {
            item.value = data.teacherTag[index]
        })
        // 主要简介
        document.querySelector('.mainTecherTopicContText').value = data.profile
        // 次要简介
        document.querySelector('.secTecherTopicContText').value = data.other
        // 热线电话
        document.querySelector('.hotTelNum').value = data.tel
        console.log(data)
    })

}

// 提交修改-函数
function postSettings() {
    // 热线电话
    const hotTelNum = document.querySelector('.hotTelNum').value
    // 视频Url
    const videoFileUrl = document.querySelector('.videoFileUrl').value
    // 顶部标题
    const videoContText = document.querySelector('.videoContText').value
    // 视频简介
    const videoIntroInfoText = document.querySelector('.videoIntroInfoText').value
    // 题目内容
    const topicContText = document.querySelector('.topicContText').value
    // 题目选项
    let optionsArr = []
    const optionsList = document.querySelectorAll('.optionsList .option input')
    optionsList.forEach((items, index) => {
        optionsArr.push(items.value)
    })
    // 老师姓名
    const techerName = document.querySelector('.techerName').value
    // 成就头衔
    let tagArr = []
    document.querySelectorAll('.tagInputBox input').forEach((items, index) => {
        tagArr.push(items.value)
    })
    // 主要简介
    const mainTecherTopicContText = document.querySelector('.mainTecherTopicContText').value
    // 次要简介
    const secTecherTopicContText = document.querySelector('.secTecherTopicContText').value

    const data = {
        onOff: onOff,
        tel: hotTelNum,
        videoUrl: videoFileUrl,
        title: videoContText,
        videoTitles: videoIntroInfoText,
        topicContent: topicContText,
        questionAnswer: optionsArr,
        correctAnswerOption: optionsID,
        telNumber: hotTelNum,
        teacherSName: techerName,
        teacherTag: tagArr,
        profile: mainTecherTopicContText,
        other: secTecherTopicContText
    }
    console.log(data)

    // 发送POST请求
    fetch('../php/cont_api.php', {  // 替换为您实际的PHP脚本URL
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify(data)
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText)
            }
            return response.text()  // 如果PHP脚本返回纯文本
            // return response.json(); // 如果PHP脚本返回JSON
        })
        .then(data => {
            console.log('Success:', data)
            alert(`提交成功\n状态码：${data}\n开发不易，微信联系：jokewkz`)
        })
        .catch(error => {
            console.error('Error:', error)
        })

}

const sumbit = document.querySelector('.sumbit')
sumbit.addEventListener('click', function () {
    postSettings()
})


// --------------------------------------------------------------------------------------

document.querySelector('.uploadFile').addEventListener('click', function () {
    // 创建一个 input[type="file"] 元素
    var input = document.createElement('input')
    input.type = 'file'
    input.style.display = 'none' // 隐藏文件选择框

    // 监听文件选择事件
    input.addEventListener('change', function (event) {
        var file = event.target.files[0] // 获取选择的文件
        if (file) {
            uploadFile(file) // 调用上传文件函数
        }
    })

    // 模拟点击文件选择框
    input.click()
})

function uploadFile(file) {
    var formData = new FormData() // 创建一个 FormData 对象
    formData.append('file', file) // 将文件添加到 FormData 中

    // 发送 POST 请求到 PHP 接口
    fetch('../php/uploadFile.php', {
        method: 'POST',
        body: formData // 将 FormData 对象作为请求体
    })
        .then(response => response.json()) // 解析 JSON 响应
        .then(data => {
            console.log(data) // 输出服务器响应
            if (data.status === 'success') {
                document.querySelector('.videoFileUrl').value = data.file_url
                alert('文件上传成功,链接已设置到输入框，链接为：' + data.file_url)
            } else {
                alert('文件上传失败: ' + data.message)
            }
        })
        .catch(error => {
            console.error('文件上传失败:', error)
            alert('文件上传失败，请稍后重试')
        })
}



setDocInfo()